<template>
  <div class="hy-table">
    <div class="header">
      <slot name="header"> </slot>
    </div>
    <el-table
      :data="props.tableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
      v-bind="props.childrenProps"
    >
      <el-table-column
        type="selection"
        v-if="props.isShowSelection"
      ></el-table-column>
      <el-table-column
        v-if="props.isShowIndex"
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <template v-for="item in props.tableItems" :key="item.label">
        <el-table-column
          align="center"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :width="item.width"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <slot :name="item.slotName" :row="row">
              {{ row[item.prop ?? ''] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer" v-if="props.isShowFooter">
      <slot name="footer"
        ><el-pagination
          background
          :current-page="props.pageInfo.currentPage"
          :page-size="props.pageInfo.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="props.pageCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      /></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import type { ITableConfig } from './types';
import type { IChildrenProps } from './types';
import { useStore } from '@/store';
import { computed } from 'vue';
// const props = defineProps({
//   tableData: {
//     type: Array,
//     required: true
//   },
//   columnConfig: {
//     type: Array as PropType<ITableConfig[]>,
//     required: true
//   }
// });
const props = withDefaults(
  defineProps<{
    tableData: any[];
    tableItems: ITableConfig[];
    isShowSelection: boolean;
    isShowIndex: boolean;
    isShowFooter: boolean;
    pageCount: number;
    pageInfo: {
      currentPage: number;
      pageSize: number;
    };
    childrenProps?: IChildrenProps;
  }>(),
  {
    tableData: () => [],
    tableItems: () => [],
    isShowSelection: true,
    isShowIndex: true,
    isShowFooter: true,
    pageCount: 0,
    pageInfo: () => ({ currentPage: 1, pageSize: 10 }),
    childrenProps: () => ({
      'row-key': '',
      'tree-props': {
        children: ''
      }
    })
  }
);
const emits = defineEmits(['update:pageInfo']);
const store = useStore();

const handleSizeChange = (pageSize: number) => {
  emits('update:pageInfo', { ...props.pageInfo, pageSize });
};
const handleCurrentChange = (currentPage: number) => {
  emits('update:pageInfo', { ...props.pageInfo, currentPage });
};

// 批量选中
const handleSelectionChange = (value: any) => {
  console.log(value);
};
</script>

<style scoped lang="less">
.hy-table {
  padding: 20px 30px;
  border-top: 20px solid rgba(214, 220, 227, 0.596);
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer {
    padding-top: 20px;
    display: flex;
    justify-content: end;
  }
}
</style>
